<!DOCTYPE html>
<html>
<head>
    <!-- Meta Tags -->
    <meta charset="UTF-8">
    <meta name="robots" content="noarchive, noindex" />
    <meta name="description" content="CSS Float jQuery plugin" />
    <meta name="keywords" content="css, float, clear" />

    <title>CSS Float jQuery plugin</title>

    <!-- Link Tags -->
    <link rel="author" href="http://www.samaxes.com/" />
    <link rel="icon" href="http://samaxes.appspot.com/favicon.ico" sizes="16x16 32x32" />

    <!-- CSS -->
    <link rel="stylesheet" href="css/style.css" />
    <!-- JavaScript -->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
    <script src="http://samaxesjs.googlecode.com/files/jquery.cssfloat-1.0.2.min.js"></script>
</head>
<body>
    <p>Without floating errors:</p>
    <ul class="cssfloat">
        <li>Floated LI #1</li>
        <li>Floated LI #2</li>
        <li>Floated LI #3</li>
        <li>Floated LI #4</li>
        <li style="clear: both"></li>
    </ul>

    <p>With floating errors:</p>
    <ul class="cssfloat">
        <li>Floated LI #1</li>
        <li>Floated LI #2</li>
        <li>Floated LI #3</li>
        <li>Floated LI #4</li>
    </ul>

    <p>Source code:</p>
    <pre>
        &lt;style>
            ul.cssfloat {
                overflow: hidden;
            }
            
            ul.cssfloat li {
                float: left;
                list-style: none;
                margin: 0 10px;
            }
        &lt;/style>
    
        &lt;p>Without floating errors:&lt;/p>
        &lt;ul class="cssfloat">
            &lt;li>Floated LI #1&lt;/li>
            &lt;li>Floated LI #2&lt;/li>
            &lt;li>Floated LI #3&lt;/li>
            &lt;li>Floated LI #4&lt;/li>
            &lt;li style="clear: both">&lt;/li>
        &lt;/ul>
    
        &lt;p>With floating errors:&lt;/p>
        &lt;ul class="cssfloat">
            &lt;li>Floated LI #1&lt;/li>
            &lt;li>Floated LI #2&lt;/li>
            &lt;li>Floated LI #3&lt;/li>
            &lt;li>Floated LI #4&lt;/li>
        &lt;/ul>

        &lt;script>
            $(document).ready(function() {
                $('body *').cssfloat();
            });
        &lt;/script>
    </pre>

    <script>
        $(document).ready(function() {
            $('body *').cssfloat();
        });
    </script>
</body>
</html>
